<template>
  <div class="boptss">
      <div class="paluntoss">
          <div class="huotoss">
              <div class="hu">
                    <van-nav-bar title="评论" left-arrow
                        @click-left="onClickLeft"
                        @click-right="onClickRight"
                    >
                        <template #right>
                            <van-icon name="search" size="18" />
                        </template>
                    </van-nav-bar>
              </div>
          </div>
          <div class="pulisto">
               <div class="item" v-for="(item,index) in pinglist" :key="index">
                    <div class="hu">
                        <div class="imgtos">
                            <div class="img">
                                <img :src="item.img" alt="">
                            </div>
                            <div class="nametos">
                                <span>{{item.name}}</span>
                                <span class="pi">2022-01-05</span>
                            </div>
                        </div>
                        <div class="textpo">
                            <p>
                              {{item.textpu}}         
                            </p>
                        </div>
                        <div class="pu" @click="dainzhi(index)">
                            <van-icon name="good-job-o" color="#000" v-show="item.anzanto==false"/>
                            <van-icon name="good-job-o" color="red" v-show="item.anzanto==true" />
                        </div>
                    </div>
               </div>
                <div class="item" v-for="(item,index) in pinglistpp" :key="index">
                    <div class="hu">
                        <div class="imgtos">
                            <div class="img">
                                <img :src="item.u.p" alt="">
                            </div>
                            <div class="nametos">
                                <span>{{item.u.n}}</span>
                            </div>
                        </div>
                        <div class="textpo">
                            <p v-for="(v,index) in item.content" :key="index">
                              {{v.c}}         
                            </p>
                        </div>
                        <div class="pu" @click="dainzhi(index)">
                            <van-icon name="good-job-o" color="#000" v-show="item.anzanto==false"/>
                            <van-icon name="good-job-o" color="red" v-show="item.anzanto==true" />
                        </div>
                    </div>
               </div>
          </div>
          <div class="bottompu">
                <van-field
                v-model="sms"
                center
                :clearable="false"
                placeholder="说点什么吧!"
                >
                    <template #button>
                       <van-button size="small" type="primary" @click="fabiao">发表</van-button>
                    </template>
                </van-field>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Icon,Button } from 'vant';
Vue.use(NavBar).use(Icon).use(Button);
import { Skeleton } from 'vant';
Vue.use(Skeleton);
import { Field } from 'vant';

Vue.use(Field);
import {getmendetailspinglun} from "../../api/menudetails";
 
export default {
     data() {
        return {
            loading: true,
            sms:"",
            pinglist:[
                {
                    name:"大大怪",
                    img:"https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto",
                    textpu:"每个人心中大概都有一道可乐鸡翅。这道菜简单快手，特别适合厨艺新手但可乐绝不是随便倒的，放多了甜腻，过少又不够入味，把握用才能咸甜适中，既保留可乐的香气，又让鸡翅光泽诱人。",
                    id:45,
                    anzanto:false
                },
                  {
                    name:"海风的韵味",
                    img:"https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto",
                    textpu:"教大家一道最简单的象形菜，把木瓜籽掏出来洗干净放小碟子里配上一把小茶匙，一道赛俄罗斯鱼子酱就做成了[doge]",
                    id:46,
                    anzanto:false
                },
                {
                    name:"眉眉健康厨房",
                    img:"https://tx1.douguo.com/upload/photo/e/3/e/70_e38e8d3275a0f51469117d1ef10e026e.JPG",
                    textpu:"学会了，给媳妇吃几天失败作品去，希望100块之内，能做个像样的样子。",
                    id:47,
                    anzanto:false
                },
                {
                    name:"夏天夏小厨",
                    img:"https://tx1.douguo.com/upload/photo/f/c/a/70_fcb5c5d28c0d2009bac2f3ecd3ceaf2a.jpg",
                    textpu:"顶!顶!顶!",
                    id:48,
                    anzanto:false
                },
                 {
                    name:"厨房笔记-fang",
                    img:"https://tx1.douguo.com/upload/photo/6/9/7/70_699605d48458f16fba52c9486576a2f7.jpg",
                    textpu:"投币，安排了。这个菜就让我感受到中国菜的各种心思。 之前总是看法国或哪里的摆盘之类的，咱们也有，甚至有更精致的。 ",
                    id:49,
                    anzanto:false
                },
                  {
                    name:"杰桑爱吃饭",
                    img:"http://tx1.douguo.net/upload/photo/f/d/c/70_fdb0f1985cecb32812cea4e6481b7a7c.jpg",
                    textpu:"继续血书雅尔塔米饭，以及今天带妈妈来哈尔滨玩儿，想问问有什么地方可以吃到老隐小隐系列菜[doge]",
                    id:50,
                    anzanto:false
                },
                {
                    name:"No糯糯oN",
                    img:"http://tx1.douguo.net/upload/photo/b/0/8/70_u60822135121386034738.jpeg",
                    textpu:" 美食治愈一切。缸豆鸡蛋披萨。 ",
                    id:51,
                    anzanto:false
                }
            ],
            pinglunddata:null,
            pinglistpp:[],
        };
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        onClickRight(){

        },
        getpinglun(){
            console.log("传",this.$route.params.data)
            let recipeid = this.$route.params.data
            getmendetailspinglun(recipeid).then(data=>{
                console.log(data);
                this.pinglunddata;

                this.pinglunddata.result.comments.forEach(ele => {
                    let data ={
                        content:ele.content,
                        u:ele.u
                    }
                    this.pinglistpp.push(data);
                });


            })
        },
        fabiao(){
            console.log(this.sms)
            let data = {
                id:1236,
                name:12,
                img:'https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto',
                anzanto:false,
                textpu:this.sms
            }
            this.pinglist.push(data)
        },
        dainzhi(index){
            console.log(this.pinglist[index].anzanto)
            this.pinglist[index].anzanto = !this.pinglist[index].anzanto;
        }
    },
    created(){
        this.getpinglun();
    }
}
</script>

<style lang="less">
.boptss{
    width: 100%;
    height: 100%;
    z-index: 99;
    position: fixed;
    background-color: #fff;
    
}
.paluntoss{
    width: 100%;
    height: 100%;
    
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    .huotoss{
        width: 100%;
        height: 45px;
        .hu{
            width: 100%;
            height: 45px;
            position: fixed;
            background-color: #fff;
            z-index: 89;
            top: 0;
            left: 0;
            .van-nav-bar__content{
                i{
                    color: #000;
                    font-size: 20px;
                }
            }
        }
    }
    .pulisto{
        width: 100%;
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 80px;
        box-sizing: border-box;
        .item{
            width: 100%;
            padding: 10px;
            // margin-top: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid rgb(211, 208, 208);
            // padding-top: 5px;
            // height: 150px;
            .hu{
                width: 100%;
                // height: 50px;
                position: relative;
                .imgtos{
                    width: 100%;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    .img{
                        width: 50px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        img{
                            width: 35px;
                            height: 35px;
                            // margin: auto;
                            border-radius: 50%;
                        }
                    }
                    .nametos{
                        width: 85%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        font-weight: 530;
                        padding-right: 25px;
                        overflow: hidden;
                        flex-wrap: wrap;
                        box-sizing: border-box;
                        span{
                            display: block;
                            width: 100%;
                            height: 20px;
                            line-height: 20px;
                            &.pi{
                                font-size: 10px;
                            }
                        }
                    }
                }
                .textpo{
                    width: 100%;
                    max-height: 100px;
                    padding-left: 50px;
                    box-sizing: border-box;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    p{
                        font-size: 12px;
                        line-height: 20px;
                        // color: #898989;
                        color: #323233;
                        word-wrap: break-word;
                    }
                }
                .pu{
                    right: 5px;
                    top: 5px;
                    position: absolute;
                    .van-icon{
                        font-size: 20px;
                    }
                }
            }
        }
    }
    .bottompu{
        width: 100%;
        height: 43px;
        position: fixed;
        bottom: 0px;
        left: 0;
        z-index: 60;
        background-color: #fff;
        .van-cell{
            align-items: center;
        }
        .van-button--primary{
            background-color: #f5f6f7;

            border-radius: 20px;
            height: 30px;
            // line-height: 28px;
            font-size: 14px;
            font-weight: bold;
            border: 0px;
            color: #898989;
        }
        .van-cell {
            position: relative;
            display: -webkit-box; 
            display: -webkit-flex; 
            display: flex; 
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box; 
            width: 100%; 
            overflow: hidden; 
            color: #323233; 
            font-size: 14px; 
            // line-height: 24px; 
        
        }
        .van-field__body {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            input{
                height: 30px;
            }
        }
        .van-cell{
            padding: 6px 6px;
            // background-color: #cccbcb6b;
            background-color: #f5f6f7;
        }
        .van-field__control {
            background-color: #fff;
            padding-left: 15px;
            border-radius: 20px;
        }
    }
}
</style>